<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		 <script src="../../js/vue.min.js"></script>
	</head>
	<body>
		
		<!-- 8.条件语句及循环语句①v-if的使用-->
			 
		<div id="root">
		<p v-if='ok'>{{message}}</p> <!-- 当OK的值为false时，移除该dom节点 -->
		<p v-else>好玩吗？</p>
		<button @click = 'clickfun'>点我</button>
		</div>
		 
		<script>
		 
		new Vue({
		 
		el: '#root',
		 
		data: {
		 
		message: 'Hello Vue!',
		 
		ok:true
		 
		},
		 
		methods:{
		 
		clickfun:function(){ <!-- 绑定点击事件，切换是否切换文字 -->
		 
		this.ok = false;
		 
		}
		 
		}
		 
		})
		 
		</script>


	</body>
</html>


